<template>
  <div class="my-page">
    <el-card shadow="never">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formRef">
        <el-form-item label="会员ID">
          <el-input v-model="formInline.id" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="用户账号">
          <el-input v-model="formInline.nickName" placeholder="用户昵称" />
        </el-form-item>
        <el-form-item label="是否为代理">
          <el-select v-model="formInline.role" placeholder="请选择">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="reset" round>重置</el-button>
          <el-button type="primary" @click="search" round>查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" class="mg-tp12 card-box">
      <template #header>
        <div class="card-header">
          <span>会员列表</span>
       
        </div>
      </template>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="会员ID" prop="id" width="100" align="center" />
        <el-table-column label="头像" prop="avater" width="100" :formatter="formatter"  align="center" >
          <template #default="scope">
            <img :src="scope.row.avater" v-if="scope.row.avater" style="width: 50px; height: 50px;"/></template>
        </el-table-column>
        <el-table-column label="用户ID" prop="account" width="180"/>
        <el-table-column label="用户昵称" prop="nickName" />
        <el-table-column label="手机号" prop="mobile" width="180" :formatter="formatterMobile" align="center"/>
        <el-table-column label="是否为代理" prop="role" width="180" align="center">
          <template #default="scope">{{
            scope.row.role == 0 ? "否" : "是"
          }}</template>
        </el-table-column>
        <el-table-column label="金币" prop="money" align="center" />
        <el-table-column label="钻石" prop="diamond" width="180" align="center" />
        <el-table-column label="状态" prop="status" width="180" align="center">
          <template #default="scope">{{
            scope.row.status == 0 ? "否" : "是"
          }}</template>
          </el-table-column>
        <el-table-column label="活跃时间" prop="loginTime" width="180" align="center">
          <template #default="scope">{{
             scope.row.loginTime
          }}</template>
        </el-table-column>
        <el-table-column label="邀请码" prop="inviteCode" width="100" align="center"/>
      
        <el-table-column label="状态" prop="status" align="center" >
          <template #default="scope">{{
            scope.row.status == 0 ? "可用" : "禁用"
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
      <template #default="scope">
        <el-button
          :icon="View"
          circle
          @click="handleClick(scope.row)"
        ></el-button>
        <el-button :icon="Edit" circle @click="toEdit(scope.row)"></el-button>
        <el-button
          :icon="Delete"
          circle
          @click="handleDel(scope.row)"
        ></el-button>
        <el-button
          :icon="House"
          circle
          @click="regClick(scope.row)"
        ></el-button>
      </template>
    </el-table-column>
      </el-table>
      <el-pagination class="mg-tp12" :page-sizes="[15, 50, 100, 200]" v-model:current-page="pageNum" :page-size="pageSize" small="small" layout="sizes,total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <AddDialog v-model="isAddVisible" title="新增会员"></AddDialog>
    <Recharge v-model="isrechVisible" :userinfo="userinfo" title="充值"></Recharge>
  </div>
</template>
    
    <script>
    import { Delete, Edit, View, Search,House } from "@element-plus/icons-vue";
    import { search, del,recharge } from "../../../api/member.js";
import { defineComponent, reactive, ref, toRefs } from "vue";
import AddDialog from "./AddDialog/index.vue";
import Recharge from "../recharge/index.vue";
export default defineComponent({
  components: { AddDialog,Recharge },
  setup() {
    // const tableData = []
    // .fill({
    //   memberId: "123",
    //   avater: "12",
    //   name: "32",
    //   phone: "34235",
    //   level: "656",
    //   extra: "45654",
    //   total: "456",
    //   time: "456",
    //   activeTime: "1312",
    //   status: "123",
    // });
    // const state = reactive({
    //   formInline: {
    //     vipId: "",
    //     phone: "",
    //     level: "",
    //     status: "",
    //   },
    //   tableData,
    //   pageSize: 15,
    //   pageNum: 1,
    //   total: 100,
    //   loading: false,
    //   isAddVisible: false,
    // });

    const formRef = ref(null);
    // const search = () => {
    //   state.loading = true;
    //   let timer = setTimeout(() => {
    //     state.loading = false;
    //     clearTimeout(timer);
    //   }, 1500);
    // };

    const reset = () => {
      formRef.value.resetFields();
    };
    return {
      formRef,
      Edit,
      Delete,
      View,
      Search,
      House,
      // search,
      // ...toRefs(state),
      reset,
      // handleSizeChange,
      // handleCurrentChange,
      // addClick,
    };
  },
  data() {
      return {
        formInline: {
          id: "",
          nickName: "",
          role: "",
          status: "",
        },
        userinfo:{},
        tableData:[],
        pageSize: 15,
        pageNum: 1,
        total: 100,
        loading: false,
        isAddVisible: false,
        isrechVisible:false,
      }
    },
  created() {
    let { pageNum = 1, pageSize = 15} = this.$route.query;

    this.pageNum = +pageNum;
    // this.queryCategory();
    this.search();
  },
  methods: {
    //查询
    async search() {
      try {
        this.loading = true;
        let res = await search(this.pageNum, this.formInline.id,this.formInline.nickName,this.formInline.role,this.formInline.status,"",this.pageSize);
        if (res.code === 200) {
          console.error(res);
          this.tableData = [...res.data.list];
          this.total = res.data.count;
          this.loading = false;
        }
      } catch (error) {
        console.log(error);
      }
    },
    handleSizeChange(val){
      this.pageSize = val.pageSize;
      this.search();
    },
    handleCurrentChange(val){
      console.log(val);
      this.pageNum = val;
      this.search();
    },
    formatter(row, column) {
        console.log(row,column)
        return row.avater==""|| !row.avater?"无":row.avater;
    },
    formatterMobile(row, column) {
        console.log(row,column)
        return row.mobile==""|| !row.mobile?"无":row.mobile;
    },
    addClick(){
      this.isAddVisible = true;
    },

    regClick(e){
      this.userinfo=e;
      this.isrechVisible = true;
    },
    toEdit(e) {
      let id = e.id;
      this.$router.push({ name: "memberEdit", params: { id: id } });
    },
    handleClick(e)
    {
      let id = e.id;
      this.$router.push({ name: "memberPoints", params: { id: id } });
    },
    delSome() {
      let ids = this.multipleSelection.map((item) => {
        return item.id;
      });
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await del(ids.join(","));
          if (res.code === 200) {
            this.$message({
              message: "删除成功 ^_^",
              type: "success",
            });
            this.search();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除文章
    async handleDel(e) {
      let id = e.id;
      try {
        let res = await del(id);
        if (res.code === 200) {
          this.$message({
            message: "会员删除成功 ^_^",
            type: "success",
          });
          this.search();
        }
      } catch (error) {
        console.log(error);
      }
    },

  }
});
</script>
    
<style scoped>
.mg-tp12 {
  margin-top: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  position: relative;
}
.card-header :deep(span){
  margin-left:12px;
}
.card-header::before {
  content: "";
  display: none;
  height: 16px;
  width: 3px;
  background-color: #1b65b9;
  margin-right: 5px;
  margin-top: -3px;
  display: inline-block;
  margin-right: 4px;
  width: 6px;
  position: absolute;
}

:deep(.el-table) {
  height: calc(100vh - 400px);
}

.card-box :deep(.el-card__body) {
  padding: 5px 10px;
}
</style>
    
    